<template>
  <div>
    <div class="headers" @click="$router.go(-1)">
      <van-icon name="arrow-left" />
      <div style="margin-left: 1rem">发票申请</div>
    </div>
    <div style="margin-top: 2rem">
      <van-form validate-first ref="formrule">
        <van-field required name="radio" label="单选框">
          <template #input>
            <van-radio-group
              name="发票类型"
              v-model="invoiceType"
              direction="horizontal"
            >
              <van-radio name="公司发票">公司发票</van-radio>
              <!-- <van-radio name="个人发票">个人发票</van-radio> -->
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          required
          v-if="isshow"
          v-model="companyname"
          name="公司名称"
          label="公司名称"
          placeholder="请输入公司名称"
          :rules="[{ required: true, message: '请输入公司名称' }]"
        />
        <van-field
          required
          v-model="username"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field v-show="isshow" required name="radio" label="开票类型">
          <template #input>
            <van-radio-group
              name="开票类型"
              v-model="type"
              direction="horizontal"
            >
              <van-radio name="普票">普票</van-radio>
              <van-radio name="专票">专票</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="isshow"
          required
          v-model="isnum"
          name="纳税人识别号"
          label="纳税人识别号"
          placeholder="请输入纳税人识别号"
          :rules="[{ required: false, message: '请输入纳税人识别号' }]"
        />
        <van-field
          v-if="isshow"
          required
          v-model="address"
          name="公司地址"
          label="公司地址"
          placeholder="请输入公司地址"
          :rules="[{ required: false, message: '请输入公司地址' }]"
        />
        <van-field
          v-if="isshow"
          v-model="bank"
          name="开户行"
          label="开户行"
          placeholder="请输入开户行"
        />
        <van-field
          required
          v-model="project"
          name="项目名称"
          label="项目名称"
          placeholder="请输入项目名称"
          :rules="[{ required: true, message: '请输入项目名称' }]"
        />
        <van-field
          required
          v-model="price"
          name="合计金额"
          label="合计金额"
          placeholder="请输入合计金额"
          :rules="[{ required: true, message: '请输入合计金额' }]"
        />
        <!-- <van-field
          readonly
          clickable
          required
          type="datetime"
          name="calendar"
          :value="isdate"
          label="款项到账日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        /> -->

        <!-- <van-calendar v-model="showCalendar" @confirm="onConfirm" /> -->
        <van-field
          required
          v-model="email"
          name="电子邮箱"
          label="电子邮箱"
          placeholder="请输入电子邮箱"
          :rules="[{ required: true, message: '请输入电子邮箱' }]"
        />
        <van-field
          required
          v-model="phone"
          name="联系电话"
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[{ pattern: isphone, message: '请输入联系电话' }]"
        />
        <van-field v-if="isshow" name="radio" label="照片">
          <template #input>
            <!-- <el-upload
              class="avatar-uploader"
              :action="http + '/admin/MemberApply/upload'"
              :show-file-list="false"
              :on-success="onSuccess"
              name="img"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload> -->
            <van-uploader
              v-model="fileList"
              :afterRead='afterRead'
              result-type='file'
              max-count='1'
            ></van-uploader>
          </template>
        </van-field>
        <van-popup position="bottom" v-model="showCalendar">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择完整时间"
            @confirm="done"
            @cancel="showCalendar = false"
        /></van-popup>
      </van-form>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 2rem;
        "
      >
        <van-button type="info" @click="commit">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { applyinvoice ,uploadFile} from "@/api/admin";
import { getapplyid, getAdminToken, getAdminUserId } from "@/utils/auth";
export default {
  data() {
    return {
      currentDate: new Date(),
      isphone: /^1[3456789]\d{9}$/,
      phone: "",
      email: "",
      bank: "",
      username: "",
      isshow: true,
      http:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
      imageUrl: "",
      address: "",
      companyname: "",
      type: "普票",
      invoiceType: "公司发票",
      isnum: "",
      project: "",
      isdate: "",
      showCalendar: false,
      price: "",
      allPrice:'',
      name:'',
      fileList:[],
    };
  },
  watch: {
    invoiceType(val) {
      this.phone = "";
      this.email = "";
      this.bank = "";
      this.username = "";
      this.imageUrl = "";
      this.address = "";
      this.companyname = "";
      this.type = "普票";
      this.isnum = "";
      this.project = "";
      this.isdate = "";
      this.price = "";
      if (val == "个人发票") {
        this.isshow = false;
      } else {
        this.isshow = true;
      }
    },
  },
  methods: {
    done(val) {
      console.log(val);
      let date = new Date(val);
      this.isdate = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDay()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
      this.showCalendar = false;
    },
    commit() {
      this.$refs.formrule
        .validate()
        .then((res) => {
          let more = {
            phone: this.phone,
            email: this.email,
            bank: this.bank,
            address: this.address,
            type: this.type,
            invoicetype: this.invoiceType,
            name: this.project,
            date: this.isdate,
            allPrice: this.price,
            nickname:this.username
          };
          applyinvoice({
            gz: this.$route.query.gz,
            applyid: getapplyid(),
            member_id: getAdminUserId(),
            hutou: this.companyname,
            nickname:this.username,
            shuihao: this.isnum,
            image: this.imageUrl,
            more: JSON.stringify(more),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("已提交申请");
              this.dialogVisible = false;
              this.clearform();
              this.$router.go(-1);
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch((error) => {
          console.log(error, "失败");
        });
    },
    clearform() {
      this.phone = "";
      this.email = "";
      this.bank = "";
      this.username = "";
      this.imageUrl = "";
      this.address = "";
      this.companyname = "";
      this.invoiceType = "普票";
      this.isnum = "";
      this.project = "";
      this.isdate = "";
      this.price = "";
    },
    onConfirm(date) {
      this.isdate = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
    afterRead({file}){
      // console.log(file,'666');
      var obj = new FormData();
      obj.append('img',file)
      uploadFile(obj).then(res=>{
        // console.log(res,'666');
        if(res.code==200){
          this.imageUrl=res.data.url;
          this.fileList=[res.data]
        }
      })
    },
    onSuccess(res) {
      this.imageUrl = res.data.url;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .headers {
    display: flex;
    font-size: 20px;
    align-items: center;
    margin: 10px 20px 0;
    .van-icon-arrow-left {
    }
     
  }

  .el-upload--text {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    .avatar {
      max-width: 4rem;
      height: auto;
    }
  }
  .van-field--error .van-field__control::placeholder{
      color: #dcdfe6 !important;
  }
}
</style>
